<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>Vue2实例</title>
		<!-- 导入原框架 -->
		<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
		<!-- 导入plus核心库 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/plus"></script>
		<!-- 导入环境适配代码 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/plus/lib/envVue2.js"></script>
	</head>
	<body>
		<div id="root">
			<jiess :setup="setup" />
		</div>
		<script type="module">
			Vue.use(new JiessEnv(JiessCore));
			// ==========定义带插槽的Vue组件============
			const VueCpt = {
				render(h) {
					return h('div', [
						this.$slots.default,
						this.$slots.slot1,
						this.$scopedSlots.slot2({ message: '这是vue作用域插槽回传数据' })
					])
				}
			};
			new Vue({
				created() {
					this.setup = function() {
						this.add(
							this.render({
									is: VueCpt,
									// Jiess插槽和vue作用域插槽均使用$slots
									$slots: { slot2: ({ message }) => message }
								},
								this.render({}, '未指定插槽名，则对应default插槽'),
								this.render({ slot: 'slot1' }, '使用vue具名插槽'),
							)
						)
					}
				}
			}).$mount('#root');
		</script>
	</body>
</html>